// hooks: react为函数组件提供一套钩子函数

// 为什么要有hook?

// class Api 基于类 this 基于对象  不太符合 UI = F(state) - 函数写法更加符合 [不能维护自身的状态]
// 既想通过函数编写组件 + 有自己的状态 => hooks

// 优势？
// 1. 更符合范式
// 2. 没有类组件额外的一些理解负担
// 3. 函数组件更加灵活更加可复用  [逻辑复用]

// react官方推荐的以后的主流的开发方式

// useState + useEffect

// useState  
// 作用: 为函数组件提供自身的状态  状态驱动视图的变化
// 语法: useState(0) -> [count, setCount]   count: 数据状态   setCount: 修改数据的配套方法

// 细节
// 1. useState可以传入js中常见的数据类型  [number / boolean / string / array / object]
// 2. useState函数的返回值 是一个数组 第一项为数据状态 第二项为配套的修改数据的方法
// 3. useState可以被执行多次 每次调用得到的数据和方法都互相独立 不影响 不要把所有的数据用一个useState维护
// 注意区分状态的粒度
// 4. 依旧需要满足状态不可变这条规矩  需要使用新的数据替换到老的数据 不能直接进行原数据操作
// 5. 所有的hook函数 执行范围必须是在函数组件中 [或者其他自定义hook函数中 useXXX]
// 6. 所有的hook函数执行有顺序要求 不能写到判断语句 循环语句中 也不能写到组件的内部函数中

// immerjs: 通过可变的方式更加符合js开发的方式对数据进行修改 插件本身内部会做不可变修改

import { useState } from 'react'
const App = () => {
  const [count, setCount] = useState(0)
  const [list, setList] = useState(['vue'])
  const [userInfo, setUserInfo] = useState({ age: 18, name: 'cp' })

  const addHandler = () => {
    setList([...list, 'react', 'angular'])
  }

  const changeUserName = () => {
    setUserInfo({
      ...userInfo,
      name: '柴柴老师'
    })
  }
  return (
    <div>
      this is App
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ul>
        {list.map(item => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addHandler}>add</button>
      <div>{userInfo.name}</div>
      <button onClick={changeUserName}>changeUserName</button>
    </div>
  )
}

export default App